<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="bg-white overflow-hidden px-4 h-full overflow-auto"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="text-center font-bold text-2xl mt-[20vh] mb-4">{{ getDayPeriod() }}好</view>
    <view class="shadow-input p-4 rounded-4">
      <wd-textarea
        v-model="inputValue"
        class="min-h-[80px]"
        placeholder="你可以问我系统使用、报销流程、管家工作指引等问题..."
        no-border
        auto-height
      />
      <view class="justify-end flex">
        <view class="submit-btn">
          <image
            :src="inputValue ? submitBtnActive : submitBtn"
            mode="scaleToFill"
            class="h-6 w-6"
          />
        </view>
      </view>
    </view>
    <view>
      <view class="text-gray-400 text-xs pb-2 pt-8">你可以尝试下面功能</view>
      <view class="grid grid-cols-4">
        <view
          class="text-center"
          v-for="item in menuList"
          :key="item.name"
          @click="handleRouter(item.path)"
        >
          <image :src="item.icon" mode="scaleToFill" class="w-8 h-8" />
          <view class="text-xs pt-1">{{ item.name }}</view>
        </view>
      </view>

      <view class="text-gray-400 text-xs pb-2 pt-8">个人专区</view>
      <view class="grid grid-cols-4">
        <view
          class="text-center"
          v-for="item in menuPersonList"
          :key="item.name"
          @click="handleRouter(item.path)"
        >
          <image :src="item.icon" mode="scaleToFill" class="w-8 h-8" />
          <view class="text-xs pt-1">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { TestEnum } from '@/typings'
import PLATFORM from '@/utils/platform'
import submitBtn from '@/static/svg/submit-btn.svg'
import submitBtnActive from '@/static/svg/submit-btn-active.svg'
import { getDayPeriod } from '@/utils/index'
defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const inputValue = ref('')
const menuList = ref([
  {
    name: '智能工单',
    icon: '/static/svg/work-order.svg',
    path: '/pages-sub/work-order/index',
  },
  {
    name: '智能缴费方案',
    icon: '/static/svg/payment-icon.svg',
    path: '/pages/fees/recommend',
  },
  {
    name: '智能多经方案',
    icon: '/static/svg/operation-icon.svg',
    path: '/pages/duojing/recommend',
  },
  {
    name: '业主关怀',
    icon: '/static/svg/owner-care.svg',
  },
])

const menuPersonList = ref([
  {
    name: '我的任务',
    icon: '/static/svg/my-task.svg',
  },
  {
    name: '我的巡检',
    icon: '/static/svg/inspects-icon.svg',
    path: '/pages-sub/inspection/index',
  },
  // {
  //   name: 'wecom-jssdk',
  //   icon: '/static/svg/inspects-icon.svg',
  //   path: '/pages-sub/wecom-jssdk/index',
  // },
])

const handleRouter = (path) => {
  console.log(path)
  // getAllPages()
  uni.navigateTo({
    url: path,
  })
}

uni.hideTabBar()

// 测试 uni API 自动引入
onLoad(() => {
  console.log(TestEnum.A)
})
</script>

<style>
.shadow-input {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}
</style>
